<template>
    <div class="app-container">
        <el-row :gutter="24">
            <el-col :span="24">
                <p>基本信息</p>
                <el-divider></el-divider>
            </el-col>
            <el-col :span="8" :offset="6">
                <el-form :model="userForm" :rules="rules" ref="userForm">
                    <el-form-item label="账号" :label-width="formLabelWidth" prop="userName">
                        <el-input v-model="userForm.userAccount" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" :label-width="formLabelWidth" prop="idCard">
                        <el-input v-model="userForm.userPassword" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱" :label-width="formLabelWidth" prop="idCard">
                        <el-input v-model="userForm.email" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="部门" :label-width="formLabelWidth" prop="dept">
                        <el-input v-model="userForm.deptName" autocomplete="off" @focus="searchDept">
                            <el-button slot="append" icon="el-icon-search" @click="searchDept"></el-button>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="岗位" :label-width="formLabelWidth" prop="address">
                        <el-row :gutter=24 type="felx" justify="space-between">
                            <el-col :span="19" style="display: flex; justify-content: flex-start; flex-wrap: wrap; ">
                                <el-tag v-for="tag in post" :key="tag.postName" closable type="success"
                                    :disable-transitions="false" @close="closeTag(tag)">
                                    {{ tag.postName }}
                                </el-tag>
                            </el-col>
                            <el-col :span="2">
                                <el-button icon="el-icon-search" @click="searchPost"></el-button>
                            </el-col>
                        </el-row>

                    </el-form-item>
                    <el-form-item label="角色" :label-width="formLabelWidth" prop="address">
                        <el-row :gutter=24 type="felx" justify="space-between">
                            <el-col :span="19" style="display: flex; justify-content: flex-start; flex-wrap: wrap; ">
                                <el-tag v-for="tag in role" :key="tag.roleName" closable type="success"
                                    :disable-transitions="false" @close="closeTag(tag)">
                                    {{ tag.roleName }}
                                </el-tag>
                            </el-col>
                            <el-col :span="2">
                                <el-button icon="el-icon-search" @click="searchRole"></el-button>
                            </el-col>
                        </el-row>

                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
        <el-row :gutter="24">
            <el-col :span="8" :offset="9">
                <el-button type="primary" @click="unSubmit">取消</el-button>
                <el-button type="primary" @click="submit">提交</el-button>
            </el-col>
        </el-row>
        <Dept ref="pushDialog"></Dept>
        <Role ref="showRoleDialog" :parentRole='role'></Role>
        <Post ref="showPostDialog" :parentPost='post'></Post>
    </div>
</template>

<script>

import Dept from '@/components/sys/dept.vue';
import Role from '@/components/sys/role.vue'
import Post from '@/components/sys/post.vue'
import { addSysUser } from '@/api/sys/sysUser'
import { type } from 'os';
export default {
    components: {
        Dept,
        Role,
        Post
    },
    data() {
        return {
            formLabelWidth: '120px',
            userForm: {
                deptName: "",
                deptId: 0,
                roleName: '222',
                roleIds:[],
                postIds:[]

            },
            rules: {
                userName: [
                    { required: true, message: '请输入姓名', trigger: 'blur' },
                    { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入身份证', trigger: 'blur' },
                    { min: 15, max: 18, message: '长度在 15 到 18 个字符', trigger: 'blur' }
                ],
            },
            role: [],
            post:[]

        }
    },
    created() {

    },
    methods: {
        // 获取子组件选择的部门
        setDept(childDept) {
            if (childDept === undefined) {
                this.userForm.deptName = '';
                this.userForm.deptId = '';
            } else {
                this.userForm.deptName = childDept.deptName;
                this.userForm.deptId = childDept.deptId;
            }

        },
        // 获取子组件选择的角色
        setRole(childRole) {
            if(childRole !== undefined && childRole.length>0){
                this.role = childRole;
                childRole.forEach(res=>{
                   this.userForm.roleIds.push(res.roleId);     
                })
            }
        },
        // 获取子组件岗位
        setPost(childPost){
            if(childPost !== undefined && childPost.length>0){
                this.post = childPost;
                childPost.forEach(res=>{
                   this.userForm.postIds.push(res.postId);     
                })
            }
            console.log(this.userForm.postIds)
        },
        // 显示部门树弹框
        searchDept() {
            this.$refs.pushDialog.show();
        },
        // 显示角色弹框
        searchRole() {
            this.$refs.showRoleDialog.show();
        },
        searchPost(){
            this.$refs.showPostDialog.show();
        },
        // 删除角色
        closeTag(tag) {
            this.role.splice(this.role.indexOf(tag), 1);

        },
        // 新增用户
        submit() {
            addSysUser(JSON.stringify(this.userForm)).then(res => {
                if (res.code === 200) {
                    this.$router.push({ name: '账号管理' })
                }
            })
        },
        //    取消
        unSubmit() {
            this.$router.push({ name: '账号管理' })
        },
    }
}
</script>

<style>
.el-row {
    margin-bottom: 20px;

    &:last-child {
        margin-bottom: 0;
    }
}

.el-col {
    border-radius: 4px;
}

.bg-purple-dark {
    background: hwb(210 95% 5%);
}

.bg-purple {
    border: 0px solid cornflowerblue;
    height: 200px;
}

.app-container {
    height: 100%;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 60px;
}

.title {
    font-size: 18px;
    font-weight: 700;
    padding-bottom: 10px;
    padding-top: 20px;
    margin-bottom: 10px;
    border-bottom: #eee 1px dotted;
}
</style>